<template>
  <view class="page">
    <view class="top">
        <text>巡店记录</text>
        <search placeholder="客户编码/客户名称/助记符" :flag="true" :debounceTime="500" :val.sync="customerKeyword" @change="obtainData"/>
    </view>
    
    <scroll-view class="content" :style="{height: contentHeight + 'px'}" scroll-y="true" @scrolltolower="queryData" >
        <view class="bgc-white" v-for="(item,i) in list" @click="datail(item)">
            <text class="grey small">客户名称</text>
            <view class="title">{{item.customerName}}</view>
            <view class="time small2">最近拜访时间：{{item.lastVisitDate}}</view>
            <view class="small2">最近下单时间：{{item.lastOrderTime}}</view>
        </view>
        <end-temp v-show="end"></end-temp>
    </scroll-view>
  </view>
</template>

<script>
import { getScreen} from "../../service/auth";
import endTemp from "../../components/endTemp";
import search from "@/components/search";
import { selectCustomer} from "../../service/api/shoprecord";

export default {
    name:'index',
    components:{search,endTemp},
    data() {
        return {
            contentHeight:0,
            list:[],
            end:false,
            page:1,
            size:20,
            customerKeyword:''
        }
    },
    created() {
    const {width,height} = getScreen()
    this.contentHeight = height - (0 * width / 750)
    this.selectCustomer()
  },
  methods: {
    selectCustomer(){
        const data={
            page:this.page,
            size:this.size,
            customerKeyword:this.customerKeyword
        }
        selectCustomer(data).then(res=>{
            if (res.data.content.length < this.size)
            this.end=true
            this.list=this.list.concat(res.data.content)
        })
    },
    queryData(){
    if(this.end)return
      this.page++
      this.selectCustomer()
    },
    obtainData(){
      this.page=1
      this.list=[]
        
      this.selectCustomer()
    },
    datail(item){
        this.customerId=item.customerId
        uni.navigateTo({url:`/order/shoprecord/detail?customerId=${this.customerId}&keyword=${this.customerKeyword}`})
    }
  },
}
</script>

<style scoped lang="scss">
.page{
    background-color: #f6f7f7;
    // background-color: #09f0f0;
    .top{
        padding: 20rpx;
        background: white;
        text{
            display: block;
            margin-bottom:15rpx;
        }
    }
    .content{
        margin:0 2%;
        width: 96%;
        .bgc-white{
            margin-top: 20rpx;
            padding: 10rpx 20rpx;
            background-color: white;
            border-radius: 20rpx;
            .small{
                font-size: 24rpx;
            }
            .title{
                font-weight: bold;
                font-size: 34rpx;
                padding-bottom: 15rpx;
                border-bottom: 1rpx solid #f1f1f1;
            }
            .time{
                margin: 10rpx 0;
            }
            .small2{
                font-size: 26rpx;
            }
        }
    }
}
</style>